<template>
    <div class="act-dt-box">
        <div class="myCardFragmentBox" v-if="type==2">
            <div class="fgbg">
                <fragmen-union :styleType="2" :fragmentNoList="fragmentNoList" :cardUrl="detail.img"/>
            </div>
            <div class="dztitle">{{detail.name}}</div>
        </div>
        <div class="sp-left-box" v-else>
            <div class="card-img-box">
                <Image :url="detail.img"/>
            </div>
            <div class="dztitle">{{detail.name}}</div>
        </div>
        <div class="cart-dt-right-con">
            <h4 class="title">NFT forging</h4>
            <div class="introduce">You are forging the ad slot into an NFT on the ETH chain, after the forging is completed, the NFT will be automatically stored on your METADO wallet.</div>
            <div class="ownerBox">
                <p>Forging ETH chain NFT requires<br>you to pay GAS</p>
                <div class="price">
                    <span><img src="/images/priceIcon.png" alt=""> </span>
                    {{ethPrice}}
                </div>
                <!-- <div class="price2">≈$ {{detail.usdPrice}}</div> -->
            </div>
            <div class="dztips">*The forging of NFTs on the ETH chain takes some time. After the forging, we will inform you on the home page. Please ensure that your metado wallet has enough eth balance</div>
            <div class="dzBtnSb">
                <my-button :styleType="2" @click="doForge">Confirm</my-button>
                <pay-pass v-if="passFlag" @close="passFlag = false" @confirm="doConfirm"/>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from '@/components/image.vue'
import fragmenUnion from '@/components/fragmenUnion.vue'
import myButton from '@/components/myButton.vue'
import payPass from '@/components/myButton.vue'
import { toast,H5CallAPPFuction } from '@/utils/common'
export default {
    components:{
       Image,
       fragmenUnion,
       myButton,
       payPass
    },
    props:{
        detail:Object,
       // id:Number,
        type:Number,
        fragmentList:{
            type:Array,
            default:[]
        },
        nftType:'' // 1:城市地标,2:广告位,3:道具,4;游戏,5:其它导入nft,6:世界杯卡片
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            dtData:props.detail || {},
            passFlag:false,
            fragmentNoList:[],
            ethPrice:'0.00'
        })

        onMounted(()=>{
            state.fragmentNoList = []
            props.fragmentList.forEach(item => {
                state.fragmentNoList = [...state.fragmentNoList,item.fragmentNo]
            });

            // App调用，发送Gas费
            window['getGasResult'] = function (gasCost) {
                state.ethPrice = gasCost || '0.00'
            }

            try {
                H5CallAPPFuction('getGasPrice')  // 调用app的getGasPrice方法,通知app，H5页面加载了,
            } catch (error) {
                console.log("调用app的getGasPrice出错了：不是在app环境中调用")
            }


            // 定义tradeResults方法，供app调用(app交易处理完成后调用)
            window['forgeResult'] = function (result) { // result：{"success":0,"msg":""}
                if(!result){
                    return toast('No Processing Result') // 没有处理结果
                }
                const rt = JSON.parse(result)
                if(rt.success!='1'){ // 锻造处理出错了
                    toast(rt.msg||'Fail')
                }else{
                    toast('Forged Successfully')
                    context.emit('success')
                } 
            }
        })

        const doForge =  ()=>{
            let appParams = {
                nftType:props.nftType
            }
            if(props.nftType==2){ // 广告位锻造
                appParams.forgeType=1 //广告位forgeType=1 世界杯卡片forgeType=2
                appParams.nftDescription= props.detail.adPlaceIntroduce
                appParams.nftImage= props.detail.adArImg
                appParams.nftName=props.detail.adPlaceTitle
                appParams.relationId=props.detail.adPlaceId
            }else if(props.nftType==6){ // 世界杯卡片锻造
                appParams.forgeType=2 
                appParams.nftDescription= props.detail.cardDesc || ''
                appParams.nftImage= props.detail.cardImg
                appParams.nftName=props.detail.cardName
                appParams.relationId=props.detail.cardId
            }
            console.log("appParams:",appParams)
            try {
                // 锻造处理: 调用app的forgeNFT方法，传入参数交由app处理，H5只接受处理结果（forgeResult方法接收）
                H5CallAPPFuction('forgeNFT',JSON.stringify(appParams)) 
            } catch (error) {
                toast('调用app失败')
                // setTimeout(()=>{
                //     forgeResult('{"success":0,"msg":""}')
                // },3000)
            }
        }

        const doConfirm = (pass)=>{
            alert(pass)
            
        }

        return{
            ...toRefs(state),
            doConfirm,
            doForge
        }
    }
}
</script>

<style lang="scss" scoped>
    .act-dt-box{
        display: flex;
        height: 100%;
        width: 100%;
        padding: 20px 30px 20px 20px;
        overflow: hidden;
        .myCardFragmentBox{
            .fgbg{
                background: rgba(0, 0, 0, 0.5);
                border-top-right-radius: 50px;
                border-bottom-left-radius: 50px;
                padding: 30px;
            } 
            
        }
        .sp-left-box{
            display: flex;
            flex-flow: column;
            height: 100%;
            width: 500px;
            .card-img-box{
                flex: 1;
                width: 500px;
                max-height: 500px;
                background: rgba(0, 0, 0, 0.5);
                border-top-right-radius: 50px;
                border-bottom-left-radius: 50px;
                padding: 30px;
            }
        }
        .cart-dt-right-con{
            flex: 1;
            width: 100%;
            height: 100%;
            padding: 0 0 0 20px;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #FFFFFF;
            overflow: auto;
            font-size: 22px;
            line-height: normal;
            flex-shrink: 0;
            .title{
                line-height: normal;
                font-family: Poppins-SemiBold, Poppins;
                font-weight: 600;
                color: #FFFFFF;
                font-size: 28px;
            }
            .introduce{
                padding: 10px 0 30px 0;
                line-height: 40px;
            }
            .ownerBox{
                width: 100%;
                background: rgba(44,91,169,0.5);
                border: 1px solid rgba(103,248,255,0.5);
                padding: 30px;
                font-family: Poppins-Medium, Poppins;
                font-weight: 500;
                color: #FFFFFF;
                line-height: normal;
                line-height: 40px;
                p{
                    text-align: center;
                }
                .price{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 32px;
                    font-family: Poppins-SemiBold, Poppins;
                    font-weight: 600;
                    margin: 20px 0 0 ;
                    img{
                        width: 22px;
                        margin: 0 10px 0 0;
                    }
                }
                .price2{
                    text-align: center;
                    font-size: 28px;
                    font-family: Poppins-Regular, Poppins;
                    font-weight: 400;
                    color: #EBFFFF;
                }
            }
            .dzBtnSb{
                width: 180px;
                margin: 30px auto 10px auto;
            }
            .dztips{
                color: #8098BC;
                padding: 20px 0 0 0;
                line-height: 40px;
            }
            
        }
        .dztitle{
                line-height: normal;
                font-family: Poppins-SemiBold, Poppins;
                font-weight: 600;
                color: #FFFFFF;
                font-size: 28px;
                text-align: center;
                padding: 20px 0;
            }
    }
</style>